<template>
	<view class="qh-popup" v-show="showPopup">
		<div class="qh-popup-modal" :class="{'is-show': showContent}" @click="close"></div>
		<view class="qh-popup__content-box" :class="{'is-show': showContent}">
			<view class="qh-popup__content-top" v-if="title || showCloseIcon" :style="titleBorder ? '' : 'border:none'">
				<view class="qh-popup__content-top-title font500">
					<slot name="title" v-if="$slots['title']"></slot>
					<text v-else>{{title}}</text>
				</view>
				<text v-if="showCloseIcon" class="qh-rt-single qh-rt-a-ziyuan1 close-icon" @click="cancel"></text>
			</view>
			<view class="qh-popup__content" :style="contentStyles">
				<slot name="content"></slot>
				<slot></slot>
			</view>
			<qh-bottom-button v-if="showButton" :showCancel="showCancel" :confirmStyle='confirmStyle' customStyle="padding:36rpx 56rpx 50rpx"
				cancelStyle="border:none;background:#F2F3F5" @cancel="cancel" @confirm="confirm" :cancelText="cancelText" :confirmText="confirmText">
			</qh-bottom-button>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'qh-popup',
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: ''
			},
			titleBorder: {
				type: Boolean,
				default: true,
			}, //title是否有下边框
			confirmClose: {
				type: Boolean,
				default: false,
			}, //确定时是否自动关闭弹窗
			closeOnClickOverlay: {
				type: Boolean,
				default: true,
			}, //点击遮罩层是否关闭弹窗
			showCloseIcon: {
				type: Boolean,
				default: false,
			}, //是否显示右上角关闭按钮  注意，当点击遮罩层不能关闭弹窗时，button与showCloseIcon也不显示的话，就关不掉弹窗了
			showButton: {
				type: Boolean,
				default: true,
			}, //是否显示底部按钮  注意，当点击遮罩层不能关闭弹窗时，button与showCloseIcon也不显示的话，就关不掉弹窗了
			confirmText: {
				type: String,
				default: '确定'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			showCancel: {
				type: Boolean,
				default: true,
			}, //是否显示取消按钮
			contentStyle: {
				type: String,
				default: ''
			},
			confirmStyle: { //确认按钮自定义样式
				type: [String, Object],
				default () {
					return {}
				}
			}
		},
		emits: ['update:value', 'change', 'input', 'confirm'],
		computed: {
			contentStyles() {
				return this.$joinStyle(this.contentStyle);
			},
		},
		data() {
			return {
				showPopup: false,
				showContent: false,
				loaded: false,
			}
		},
		methods: {
			//点击遮罩层关闭弹窗
			close() {
				if (!this.closeOnClickOverlay) return;
				this.$emit('cancel', 'close')
				this.$emit('update:value', false)
				this.$emit('input', false)
			},
			//点击取消按钮
			cancel() {
				this.$emit('cancel', 'cancel')
				this.$emit('update:value', false)
				this.$emit('input', false)
			},
			//点击确认按钮
			confirm() {
				this.$emit('confirm')
				if (this.confirmClose) {
					this.$emit('update:value', false)
					this.$emit('input', false)
				}
			},
			show() {
				this.showPopup = true;
				setTimeout(() => {
					this.showContent = true;
				}, 50)
			},
			hide() {
				this.showContent = false;
				setTimeout(() => {
					this.showPopup = false;
				}, 300)
			},
		},
		created() {
			this.value && this.show();
		},
		watch: {
			value(n, o) {
				if (n != o) {
					n ? this.show() : this.hide();
				}
			},
		}
	}
</script>

<style lang="scss">
	.qh-popup {
		.qh-popup-modal {
			width: 100vw;
			height: 100vh;
			position: fixed;
			transition: all 0.3s ease;
			top: 0;
			left: 0;
			background-color: transparent;
			z-index: -1;

			&.is-show {
				background-color: rgba(51, 51, 51, 0.6);
				z-index: 1000;
			}
		}

		.qh-popup__content-box {
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			// padding-bottom: 60rpx;
			position: fixed;
			left: 0;
			bottom: var(--popup-content-bottom);
			width: 100%;
			height: auto;
			transition: all 0.3s ease;
			transform: translateY(100%);
			z-index: 1999;

			&.is-show {
				transform: translateY(0%);
			}

			.qh-popup__content-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx;
				border-bottom: 2rpx solid #F6F6F6;
				height: 114rpx;
				box-sizing: border-box;
				position: relative;

				.qh-popup__content-top-title {
					color: #1e1e1e;
					flex: 1;
					overflow: hidden;
					text-align: center;
					font-size: 32rpx;
					line-height: 36rpx;
					line-height: 108rpx;
				}

				.close-icon {
					font-size: 28rpx;
					color: #929397;
					padding: 20rpx;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
			}

			.qh-popup__content {
				padding: 20rpx 0 0;
				max-height: 73vh;
				overflow-y: auto;
			}
		}

	}
</style>
